<template>
  <el-dialog :title="formData.id?'编辑客户':'新增客户'" :visible="showDialog" @close="closeFn">
    <el-form ref="form" label-width="80px" :model="formData" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>

      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" />
      </el-form-item>

      <el-form-item label="封面">
        <UploadImage ref="img" />
        <el-input placeholder="强制设置图片跳过上传" />
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">

      <el-button type="primary" size="small" @click.native="submit">确定</el-button>
      <el-button size="small" @click.native="closeFn">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addCategories, getCategoriesId, editCategories } from '@/api/categories/index'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '',
        desc: '',
        image: ''
      },
      rules: {
        title: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 清除图片
    removeImg() {
      this.imgUrl = ''
    },
    // 根据id获取分类
    async getCategoriesById(id) {
      const rrr = await getCategoriesId(id)
      this.formData = rrr.data
      this.$refs.img.imgUrl = this.formData.image
      console.log(62, this.formData)
    },
    // 确定新增
    async submit() {
    // 表单校验
      await this.$refs.form.validate()
      // console.log(this.$refs.img2.imgUrl)
      // 调用接口
      if (this.formData.id) {
        this.formData.image = this.$refs.img.imgUrl
        await editCategories(this.formData)
      } else {
        this.formData.image = this.$refs.img.fileList[0].url

        await addCategories(this.formData)
      }
      console.log(82, this.formData)

      // 更新列表
      this.$emit('updateEvent')
      // 关闭弹窗
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
    // 关闭弹窗
      this.$emit('update:showDialog', false)
      // 清空数据
      this.formData = {
        tiele: '',
        desc: '',
        image: ''
      }
      // 清空校验规则
      this.$refs.form.resetFields()
    }
  }

}
</script>

<style>

</style>
